<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片HTML</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">

body{text-align:center; font-size:12px; margin:0px; padding:0px; background:#000;}
a{ text-decoration:none;}
ul,li{margin:0px; padding:0px;}

#content{width:1000px; height:auto; margin-left:auto; margin-right:auto;}
#header{ background:#999; height:120px;}
#logo{height:80px; text-align:left; font-size:30px;}
#search{width:200px; float:right;};
#menu{height:30px; padding-left:50px; float:left; width:600px;}
#menu ul{ list-style:none; }
#menu ul li{ float:left; padding-left:20px;}

#pleft{width:730px; float:left; height:auto; text-align:left; padding-right:20px;}
#pright{width:229px; float:left; border-left:solid 1px #999; height:500px; text-align:left; padding-left:20px; line-height:20px;}

.img_box{width:150px; height:180px; float:left; border:solid 1px #999; padding:5px; margin-right:15px;}

#toleft{position:relative; left:0px; top:0px; float:left;  z-index:100; width:200px; height:600px; color:#fff;
        
        filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity:0.5;
		opacity:0;
		
        }

#toright{position:relative; right:0px; top:0px; float:right; z-index:101; width:200px; height:600px; color:#fff;
         
        filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity:0.5;
		opacity:0;
		}

#cleft{height:80px; width:100px; position:relative; top:250px; background:red;}

#cright{height:80px; width:100px; position:relative; top:250px; left:100px; background:red;}

#pic{position:relative; top:0px; z-index:80; width:800px; height:600px; margin-left:auto; margin-right:auto; background:url(img/6.jpg);}

#pic_list{width:1000px; height:120px; overflow-x:auto;}

#pic_list ul{ list-style:none;}

#pic_list ul li{float:left; padding:10px;}

</style>

</head>
<body>
<div id="content">
     <div id="header">
         <div id="logo">难道我会告诉你,我正在制作网站吗?<img src="" /></div>
         <div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">图片</a></li><li><a href="#">关于</a></li></ul></div>
         <div id="search"><form><input type="text" name="q"><img src=""></form></div>
     </div>
     <div id="pagabody">
        <div id="big_pic" style="margin-top:10px; text-align:center;">
            
            <div id="toleft"><div id="cleft"></div></div>
            <div id="toright"><div id="cright"></div></div>
            <div id="pic"></div>
        </div>
        <div id="pic_list" style="">
          <div style="width:9000px;">
            <ul>
              <li><a href="#"><img src="img/1.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/2.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/3.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/4.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/5.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/6.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/1.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/2.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/3.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/4.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/5.jpg" width=100 height=70 /></a></li>
              <li><a href="#"><img src="img/6.jpg" width=100 height=70 /></a></li>
            </ul>
            </div>
        </div>
     </div>
     
     <div id="footer">
     </div>
</div>
<script type="text/javascript">
$("#toleft").mouseover(function(){$(this).css('opacity','0.2'); $("#toright").css('opacity','0.2');});
$("#toright").mouseover(function(){$(this).css('opacity','0.2'); $("#toleft").css('opacity','0.2');});
$("#toleft").mouseout(function(){$(this).css('opacity','0'); $("#toright").css('opacity','0');});
$("#toright").mouseout(function(){$(this).css('opacity','0'); $("#toleft").css('opacity','0');});

$("#cleft").click(function(){ $("#pic").css('background','url(img/1.jpg)');});
$("#cright").click(function(){ $("#pic").css('background','url(img/6.jpg)');});
</script>
</body>
</html>